<template>
  <div class="order-add-or-upload">
    <el-dialog
      v-model="visible"
      :title="
        !dataForm.orderNumber
          ? $t('crud.addBtn')
          : $t('seckill.view')
      "
      :close-on-click-modal="false"
      width="80%"
    >
      <el-form
        ref="dataFormRef"
        :model="dataForm"
        label-width="80px"
        @submit.prevent
      >
        <div class="mod-order-orderInfo">
          <div class="content">
            <div
              class="order-number"
              style="display: none"
            >
              <div class="num-cont">
                <el-form-item :label="$t('order.number') + '：'">
                  <span class="text">{{ dataForm.orderNumber }}</span>
                </el-form-item>
                <el-form-item>
                  <el-steps
                    :active="stepsStatus"
                    align-center
                    :process-status="dataForm.status === 6 ? 'error' : 'wait'"
                  >
                    <el-step
                      :title="$t('order.submitOrder')"
                      :description="dataForm.createTime"
                    />
                    <el-step
                      :title="$t('order.paid')"
                      :description="dataForm.payTime"
                    />
                    <el-step
                      :title="$t('order.delivered')"
                      :description="dataForm.dvyTime"
                    />
                    <el-step
                      :title="$t('order.receivedGoods')"
                      :description="dataForm.finallyTime"
                    />
                  </el-steps>
                </el-form-item>
              </div>
            </div>

            <div class="order-number">
              <div class="number">
                <span class="text">{{ $t("order.number") }}：</span>
                {{ dataForm.orderNumber }}
              </div>
              <div class="time">
                <span class="text">{{ $t("order.createTime") }}：</span>
                {{ dataForm.createTime }}
              </div>
              <div class="type">
                {{
                  [
                    $t("order.normalOrder"),
                    $t("order.groupPurchaseOrder"),
                    $t("order.spikeOrder"),
                  ][dataForm.orderType]
                }}
              </div>
            </div>
            <div class="order-state">
              <div class="state-box">
                <div class="state">
                  {{
                    [
                      $t("order.waitingFosPayment"),
                      $t("order.waitiooShip"),
                      $t("order.waitingFeGoods"),
                      $t("order.waitingtion"),
                      $t("order.commoditful"),
                      $t("order.commodityFailed"),
                      $t("order.commodited"),
                    ][dataForm.status - 1]
                  }}
                </div>
                <div class="state-des">
                  <div v-if="dataForm.status === 1">
                    {{ $t("order.buyerDidNTime") }}
                  </div>
                  <div v-if="dataForm.status === 2">
                    {{ $t("order.buyPleF") }}
                  </div>
                  <div v-if="dataForm.status === 3">
                    {{ $t("order.shelF") }}
                  </div>
                  <div v-if="dataForm.status === 5">
                    {{ $t("order.buyB") }}
                  </div>
                  <div v-if="dataForm.status === 6">
                    {{ $t("order.orderCanc") }}
                  </div>
                  <div v-if="dataForm.status === 7">
                    {{ $t("order.outTimeCanOrd") }}
                  </div>
                </div>
              </div>
              <div class="state-steps">
                <el-form-item>
                  <el-steps
                    :active="stepsStatus"
                    align-center
                    :process-status="dataForm.status === 6 ? 'error' : 'wait'"
                  >
                    <el-step
                      :title="$t('order.submitOrders')"
                      :description="dataForm.createTime"
                    />
                    <el-step
                      :title="$t('order.theBuyerHasPaid')"
                      :description="dataForm.payTime"
                    />
                    <el-step
                      :title="$t('order.shippedBySeller')"
                      :description="dataForm.dvyTime"
                    />
                    <el-step
                      :title="$t('order.buyerHasReceived')"
                      :description="dataForm.finallyTime"
                    />
                  </el-steps>
                </el-form-item>
              </div>
            </div>
            <div class="packages">
              <div class="p-tab">
                <div
                  v-for="(
                    deliveryExpresse1, index
                  ) in dataForm.deliveryExpresses"
                  :key="index"
                  :class="indexs === index ? 'item active' : 'item'"
                  @click="onClickListDelivery(deliveryExpresse1, index)"
                >
                  {{ $t("order.package") }}{{ index + 1 }}
                </div>
              </div>
              <div
                v-if="deliveryExpresse"
                class="p-con"
              >
                <div class="deliver-msg">
                  <div class="d-item">
                    <div class="text">
                      {{ $t("order.deliveryMethod") }}：
                    </div>
                    <div class="res">
                      {{
                        [
                          $t("order.expressDelivery"),
                          $t("order.expressDelivery"),
                          $t("order.selfMention"),
                          $t("order.noNeedRequired"),
                        ][deliveryExpresse.deliveryType] || [
                          $t("order.expressDelivery"),
                          $t("order.expressDelivery"),
                          $t("order.selfMention"),
                          $t("order.noNeedRequired"),
                        ][dataForm.dvyType]
                      }}
                    </div>
                  </div>
                  <div class="d-item">
                    <div class="text">
                      {{ $t("order.deliveryTime") }}：
                    </div>
                    <div class="res">
                      {{ deliveryExpresse.createTime }}
                    </div>
                  </div>
                  <div
                    v-if="deliveryExpresse.deliveryType !== 3"
                    class="d-item"
                  >
                    <div class="text">
                      {{ $t("order.courierCompany") }}：
                    </div>
                    <div class="res">
                      {{ deliveryExpresse.deliveryDto.companyName }}
                    </div>
                  </div>
                  <div
                    v-if="deliveryExpresse.deliveryType !== 3"
                    class="d-item"
                  >
                    <div class="text">
                      {{ $t("order.trackingNumber") }}：
                    </div>
                    <div class="res">
                      {{ deliveryExpresse.deliveryDto.dvyFlowId }}
                    </div>
                  </div>
                  <div class="d-goods over">
                    <div class="arrow-box">
                      <div class="arrow prev disable" />
                      <div class="arrow next" />
                    </div>
                    <div class="goods-box">
                      <div
                        v-for="(
                          orderItem, index
                        ) in deliveryExpresse.orderItems"
                        :key="index"
                        class="item"
                      >
                        <div class="img">
                          <img
                            :src="resourcesUrl + orderItem.pic"
                            alt
                          >
                        </div>
                        <div class="name">
                          {{ orderItem.prodName }}
                        </div>
                        <div class="number">
                          {{ $t("order.quantity") }}：{{ orderItem.prodCount }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="logistics">
                  <div
                    v-if="deliveryExpresse.deliveryDto && deliveryExpresse"
                    class="l-tit"
                  >
                    <span class="text">{{ $t("order.logisticsStatus") }}：</span>
                    <span
                      v-if="deliveryExpresse.deliveryDto.state === 0"
                      class="l-state"
                    >{{ $t("order.noRecord") }}</span>
                    <span
                      v-if="deliveryExpresse.deliveryDto.state === 1"
                      class="l-state"
                    >{{ $t("order.collected") }}</span>
                    <span
                      v-if="deliveryExpresse.deliveryDto.state === 2"
                      class="l-state"
                    >{{ $t("order.delivering") }}</span>
                    <span
                      v-if="deliveryExpresse.deliveryDto.state === 3"
                      class="l-state"
                    >{{ $t("order.haveBeenReceived") }}</span>
                    <span
                      v-if="deliveryExpresse.deliveryDto.state === 201"
                      class="l-state"
                    >{{ $t("order.reachTheDestinationCity") }}</span>
                    <span
                      v-if="deliveryExpresse.deliveryDto.state === 4"
                      class="l-state"
                    >{{ $t("order.problemPiece") }}</span>
                  </div>
                  <div
                    v-if="deliveryExpresse && deliveryExpresse.deliveryDto"
                    class="logistics-box"
                  >
                    <div
                      v-if="
                        deliveryExpresse.deliveryDto.state === 0 &&
                          dataForm.status === 5 &&
                          dataForm.finallyTime !== null
                      "
                      class="item"
                    >
                      <div class="time">
                        {{ dataForm.finallyTime }}
                      </div>
                      <div class="text">
                        {{ $t("order.receivedGoods") }}
                      </div>
                    </div>
                    <div
                      v-for="(trace, index) in deliveryExpresse.deliveryDto
                        .traces"
                      :key="index"
                      class="item"
                    >
                      <div class="time">
                        {{ trace.acceptTime }}
                      </div>
                      <div class="text">
                        {{ trace.acceptStation }}
                      </div>
                    </div>
                    <div
                      v-if="
                        deliveryExpresse.deliveryDto.traces &&
                          deliveryExpresse.deliveryDto.traces.length < 1
                      "
                      class="item"
                    >
                      {{ $t("order.noLogisticsInformation") }}
                    </div>
                    <div
                      v-if="dataForm.status >= 3 && dataForm.dvyTime !== null"
                      class="item"
                    >
                      <div class="time">
                        {{ dataForm.dvyTime }}
                      </div>
                      <div class="text">
                        {{ $t("order.merchantHasShippedWa") }}
                      </div>
                    </div>
                    <div
                      v-if="dataForm.status >= 2 && dataForm.payTime !== null"
                      class="item"
                    >
                      <div class="time">
                        {{ dataForm.payTime }}
                      </div>
                      <div class="text">
                        {{ $t("order.buyerHasPaidWa") }}
                      </div>
                    </div>
                    <div
                      v-if="dataForm.status >= 1"
                      :class="['item', dataForm.status >= 1?'left-line':'']"
                    >
                      <div class="time">
                        {{ dataForm.createTime }}
                      </div>
                      <div class="text">
                        {{ $t("order.buyerSubmittedAnOrder") }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="order-info">
              <div class="info-item">
                <div class="item-tit">
                  {{ $t("order.recipientInformation") }}
                </div>
                <div class="item">
                  <div class="text">
                    {{ $t("publics.addressee") }}：
                  </div>
                  <div class="res">
                    {{ dataForm.userAddrOrder.receiver }}
                  </div>
                </div>
                <div class="item">
                  <div class="text">
                    {{ $t("publics.mobilePhone") }}：
                  </div>
                  <div class="res">
                    {{ dataForm.userAddrOrder.mobile }}
                  </div>
                </div>
                <div class="item">
                  <div class="text">
                    {{ $t("publics.deliveryAddr") }}：
                  </div>
                  <div class="res">
                    {{ dataForm.userAddrOrder.province
                    }}{{ dataForm.userAddrOrder.area
                    }}{{ dataForm.userAddrOrder.city
                    }}{{ dataForm.userAddrOrder.addr }}
                  </div>
                </div>
              </div>
              <div class="info-item">
                <div class="item-tit">
                  {{ $t("order.shippingInformation") }}
                </div>
                <div class="item">
                  <div class="text">
                    {{ $t("order.delType") }}：
                  </div>
                  <div class="res">
                    {{
                      [
                        $t("order.expressDelivery"),
                        $t("order.expressDelivery"),
                        $t("order.selfMention"),
                        $t("order.noNeedRequired"),
                      ][deliveryExpresse.deliveryType] || [
                        $t("order.expressDelivery"),
                        $t("order.expressDelivery"),
                        $t("order.selfMention"),
                        $t("order.noNeedRequired"),
                      ][dataForm.dvyType]
                    }}
                  </div>
                  <div
                    v-if="dataForm.dvyType === null"
                    class="res"
                  >
                    {{ $t("order.notYet") }}
                  </div>
                </div>
                <div class="item">
                  <div class="text">
                    {{ $t("order.deliveryTime") }}：
                  </div>
                  <div class="res">
                    {{ dataForm.dvyTime }}
                  </div>
                  <div
                    v-if="dataForm.dvyTime === null"
                    class="res"
                  >
                    {{ $t("order.notYet") }}
                  </div>
                </div>
              </div>
              <div class="info-item">
                <div class="item-tit">
                  {{ $t("order.paymentInformation") }}
                </div>
                <div class="item">
                  <div class="text">
                    {{ $t("order.actualAmount") }}：
                  </div>
                  <div class="res">
                    {{
                      $t("order.monetaryUnit") +
                        dataForm.actualTotal +
                        " + " +
                        dataForm.score +
                        $t("order.score") }}
                  </div>
                </div>
                <div class="item">
                  <div class="text">
                    {{ $t("order.paymentMethod") }}：
                  </div>
                  <div v-if="dataForm.payType === null || dataForm.status === 1">
                    {{ $t("order.unpaid") }}
                  </div>
                  <div
                    v-else
                    class="res"
                  >
                    {{
                      [
                        $t("order.pointsPayment"),
                        $t("order.wecProPay"),
                        $t("order.alipayPCPayment"),
                        $t("order.wechatScanCodePayment"),
                        $t("order.wechatH5Payment"),
                        $t("order.weclAccountPay"),
                        $t("order.alipayH5Payment"),
                        $t("order.alipayAPPPayment"),
                        $t("order.wechatAPPPayment"),
                        $t("order.balancePayment"),
                      ][dataForm.payType]
                    }}
                  </div>
                </div>
                <div class="item">
                  <div class="text">
                    {{ $t("order.paymentTime") }}：
                  </div>
                  <div class="res">
                    {{ dataForm.payTime }}
                  </div>
                  <div
                    v-if="dataForm.payTime === null"
                    class="res"
                  >
                    {{ $t("order.notYet") }}
                  </div>
                </div>
              </div>
              <div class="info-item">
                <div class="item-tit">
                  {{ $t("order.buyerInformation") }}
                </div>
                <div class="item">
                  <div class="text">
                    {{ $t("order.buyerSNickname") }}：
                  </div>
                  <div class="res">
                    {{ dataForm.nickName }}
                  </div>
                  <div
                    v-if="dataForm.nickName === null"
                    class="res"
                  >
                    {{ $t("order.notYet") }}
                  </div>
                </div>
                <div class="item">
                  <div class="text">
                    {{ $t("order.storeNotes") }}：
                  </div>
                  <div class="res res-ifon">
                    {{ dataForm.remarks }}
                  </div>
                  <div
                    v-if="dataForm.remarks === null || dataForm.remarks === ''"
                    class="res"
                  >
                    {{ $t("order.notYet") }}
                  </div>
                </div>
              </div>
            </div>
            <div class="goods-list">
              <el-table
                :data="dataForm.orderItems"
                border
                :header-cell-style="{'text-align':'center'}"
              >
                <el-table-column
                  label=""
                  width="100"
                  align="center"
                >
                  <template #default="scope">
                    <img-show
                      width="60"
                      height="60"
                      :src="scope.row.pic"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  :label="$t('home.product')"
                >
                  <template #default="scope">
                    <div class="df">
                      <span class="name">{{ scope.row.prodName }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="price"
                  :label="$t('order.unitPrice')"
                  width="180"
                  align="center"
                >
                  <template #default="scope">
                    <span>                    {{
                      $t("order.monetaryUnit") +
                        scope.row.price +
                        " + " +
                        scope.row.useScore / scope.row.prodCount +
                        $t("order.score") }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="count"
                  :label="$t('order.quantity')"
                  width="180"
                  align="center"
                >
                  <template #default="scope">
                    <span>{{ scope.row.prodCount }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="totalPrice"
                  :label="$t('order.totalPrice')"
                  width="180"
                  align="center"
                >
                  <template #default="scope">
                    <span>                    {{
                      $t("order.monetaryUnit") +
                        scope.row.productTotalAmount +
                        " + " +
                        scope.row.useScore +
                        $t("order.score") }}</span>
                  </template>
                </el-table-column>
              </el-table>
              <div class="goods-total">
                <div class="text-box">
                  <div class="item">
                    <div class="text">
                      {{ $t("order.prodTotalPrice") }}:
                    </div>
                    <div class="number">
                      {{
                        $t("order.monetaryUnit") +
                          dataForm.total +
                          " + " +
                          dataForm.score +
                          $t("order.score") }}
                    </div>
                  </div>
                  <div
                    v-if="dataForm.freightAmount"
                    class="item"
                  >
                    <div class="text">
                      {{ $t("order.shippingFees") }}:
                    </div>
                    <div class="number">
                      ￥{{ dataForm.freightAmount }}
                    </div>
                  </div>
                  <div class="item act-price">
                    <div class="text">
                      {{ $t("order.amountDue") }}:
                    </div>
                    <div class="number">
                      {{
                        $t("order.monetaryUnit") +
                          dataForm.actualTotal +
                          " + " +
                          dataForm.score +
                          $t("order.score") }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="order-log">
              <div class="log-title">
                {{ $t("order.logs") }}
              </div>
              <div
                v-if="dataForm.createTime"
                class="log-cont"
              >
                {{ dataForm.createTime }} {{ dataForm.nickName }}
                {{ $t("order.createOrder") }}
              </div>
              <div
                v-if="dataForm.payTime"
                class="log-cont"
              >
                {{ dataForm.payTime }} {{ dataForm.nickName }}
                {{ $t("order.payment") }}
              </div>
              <div
                v-if="dataForm.dvyTime"
                class="log-cont"
              >
                {{ dataForm.dvyTime }}
                {{ $t("order.deliverys") }}
              </div>
              <div
                v-if="dataForm.finallyTime"
                class="log-cont"
              >
                {{ dataForm.finallyTime }} {{ dataForm.nickName }}
                {{ $t("order.completed") }}
              </div>
              <div
                v-if="dataForm.cancelTime"
                class="log-cont"
              >
                {{ dataForm.cancelTime }} {{ dataForm.nickName }}
                {{ $t("order.cancelOrder") }}
              </div>
              <div
                v-if="dataForm.updateTime"
                class="log-cont"
              >
                {{ dataForm.updateTime }} {{ dataForm.nickName }}
                {{ $t("order.orderUpdate") }}
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
const visible = ref(false)
const dataForm = ref({
  orderId: 0,
  orderNumber: '',
  remarks: '',
  shopRemarks: '',
  total: 0,
  deliveryExpresses: [],
  actualTotal: 0,
  dvyType: '',
  status: 1,
  addrOrderId: 0,
  nickName: '',
  orderItems: [],
  orderTime: '',
  updateTime: '',
  payTime: '',
  dvyTime: '',
  finallyTime: '',
  cancelTime: '',
  orderType: '',
  userAddrOrder: {}
})
const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
const deliveryExpresse = ref({
  deliveryDto: {}
})
const orderRemarkUpdateVisible = ref(false)
const orderAddrUpdateVisible = ref(false)
watch(visible, () => {
  if (!visible.value) {
    orderRemarkUpdateVisible.value = false
    orderAddrUpdateVisible.value = false
  }
})
const stepsStatus = computed(() => {
  if (dataForm.value.finallyTime) {
    return 4
  }
  if (dataForm.value.dvyTime) {
    return 3
  }
  if (dataForm.value.payTime) {
    return 2
  }
  if (dataForm.value.createTime) {
    return 1
  }
})
const dataFormRef = ref(null)
const init = (orderNumber) => {
  dataForm.value.orderNumber = orderNumber || 0
  visible.value = true
  nextTick(() => {
    dataFormRef.value.resetFields()
  })
  if (dataForm.value.orderNumber) {
    // 修改
    http({
      url: http.adornUrl(`/order/delivery/orderInfo/${dataForm.value.orderNumber}`),
      method: 'get',
      params: http.adornParams()
    }).then(({ data }) => {
      dataForm.value = data
      deliveryExpresse.value = dataForm.value.deliveryExpresses.length ? dataForm.value.deliveryExpresses[0] : ''
    })
  }
}
/**
 * 物流事件
 */
const indexs = ref(0)
const onClickListDelivery = (delivery, index) => {
  http({
    url: http.adornUrl(`/order/delivery/deliveryOrder/${delivery.orderDeliveryId}`),
    method: 'get'
  }).then(({ data }) => {
    deliveryExpresse.value = data
  })
  indexs.value = index
}
defineExpose({ init })
</script>

<style lang="scss" scoped>
.order-add-or-upload  {
  :deep(.el-dialog) {
    min-width: 950px;
    margin-top: 10vh !important;
  }
  .goods-list :deep(.el-table )  {
    td{

      border-right: 0;
    }
}
.left-line {
  border-left: 1px solid #fff !important;
}
.mod-order-orderInfo {
  height: 100%;
  width: 100%;
  font: 14px Arial, "PingFang SC", "Hiragino Sans GB", STHeiti,
    "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  color: #333;

  .order-number {
    display: flex;
    align-items: center;
    font-size: 14px;
  }

  .order-number .text {
    color: #999;
  }

  .order-number .number,
  .order-number .time {
    display: flex;
    align-items: center;
  }

  .order-number .time {
    margin: 0 15px;
  }

  .order-state {
    position: relative;
    margin-top: 15px;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
  }

  .order-state .state-box {
    padding: 20px 15px;
    width: 40%;
    border-right: 1px solid #eee;
  }

  .order-state .state-box .state {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
  }

  .order-state .state-box .state-des {
    margin-top: 10px;
    color: #999;
  }
  .order-state .state-steps {
    flex: 1;
    margin-left: -80px;
  }

  .order-state .state-steps :deep(.el-form-item)  {
    margin-bottom: 0;
  }

  .packages {
    margin-top: 15px;
  }

  .packages .p-tab {
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
  }

  .packages .p-tab .item {
    background: #F7F8FA;
    margin-right: -1px;
    margin-bottom: -1px;
    position: relative;
    text-align: center;
    line-height: 44px;
    width: 90px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    height: 44px;
  }

  .packages .p-tab .item:first-child {
    border-radius: 3px 0 0 0;
  }

  .packages .p-tab .item:last-child {
    border-radius: 0 3px 0 0;
  }

  .packages .p-tab .item.active {
    background: #fff;
    border-bottom: 1px solid #fff;
  }

  .packages .p-con {
    border: 1px solid #eee;
    border-top: 0;
    padding: 20px;
    display: flex;
  }

  .packages .p-con .deliver-msg {
    width: 40%;
  }

  .packages .p-con .deliver-msg .d-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .packages .p-con .deliver-msg .d-item .text {
    width: 80px;
  }

  .packages .p-con .deliver-msg .d-goods {
    position: relative;
    width: 334px;
  }

  .packages .p-con .deliver-msg .d-goods.over {
    padding: 0 32px;
  }

  .packages .p-con .deliver-msg .d-goods .arrow-box {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    display: none;
  }

  .packages .p-con .deliver-msg .d-goods.over .arrow-box {
    display: block;
  }

  .packages .p-con .deliver-msg .d-goods .arrow-box .arrow {
    width: 22px;
    height: 22px;
    background: #eee;
    position: absolute;
    z-index: 2;
    border-radius: 50%;
    cursor: pointer;
  }

  .packages .p-con .deliver-msg .d-goods .arrow-box .arrow.disable {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .packages .p-con .deliver-msg .d-goods .arrow-box .arrow.prev {
    left: 0;
    transform: rotate(180deg);
  }

  .packages .p-con .deliver-msg .d-goods .arrow-box .arrow.next {
    right: 0;
  }

  .packages .p-con .deliver-msg .d-goods .arrow-box .arrow::before,
  .packages .p-con .deliver-msg .d-goods .arrow-box .arrow::after {
    position: absolute;
    top: 6px;
    display: block;
    width: 0;
    height: 0;
    content: " ";
    font-size: 0;
    border: 5px solid transparent;
  }

  .packages .p-con .deliver-msg .d-goods .arrow-box .arrow::before {
    left: 10px;
    border-left: 5px solid #999;
  }

  .packages .p-con .deliver-msg .d-goods .arrow-box .arrow::after {
    left: 8px;
    border-left: 5px solid #eee;
  }

  .packages .p-con .deliver-msg .d-goods .goods-box {
    display: flex;
    overflow: hidden;
  }

  .packages .p-con .deliver-msg .d-goods .goods-box .item {
    margin-right: 10px;
    font-size: 12px;
    cursor: pointer;
  }

  .packages .p-con .deliver-msg .d-goods .goods-box .item:last-child {
    margin: 0;
  }

  .packages .p-con .deliver-msg .d-goods .goods-box .item .img {
    width: 60px;
    height: 60px;
    font-size: 0;
    margin-bottom: 3px;
  }

  .packages .p-con .deliver-msg .d-goods .goods-box .item .img img {
    width: 100%;
    height: 100%;
  }

  .packages .p-con .deliver-msg .d-goods .goods-box .item .name,
  .packages .p-con .deliver-msg .d-goods .goods-box .item .number {
    width: 60px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #999;
  }

  .packages .p-con .logistics {
    flex: 1;
  }

  .packages .p-con .logistics .l-tit {
    display: flex;
  }

  .packages .p-con .logistics .l-tit .l-state {
    color: #c00;
  }

  .packages .p-con .logistics .logistics-box {
    height: 175px;
    overflow-y: scroll;
    position: relative;
    margin-top: 15px;
  }

  .packages .p-con .logistics .logistics-box::before {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 10px;
    height: 10px;
    content: " ";
    font-size: 0;
    background: #fff;
    z-index: 1;
  }

  .packages .p-con .logistics .logistics-box::after {
    position: absolute;
    left: 6px;
    top: 0;
    display: block;
    height: 100%;
    content: " ";
    font-size: 0;
    background: #eee;
    z-index: 0;
  }

  .packages .p-con .logistics .logistics-box .item {
    padding: 0 0 40px 25px;
    position: relative;
    margin-left: 6px;
    border-left: 1px solid #eee;
  }

  .packages .p-con .logistics .logistics-box .item::before {
    position: absolute;
    left: -10px;
    top: 0;
    display: block;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    content: " ";
    font-size: 0;
    background: #ccc;
    border: 5px solid #fff;
    z-index: 2;
  }

  .packages .p-con .logistics .logistics-box .item:first-child:before {
    background: #c00;
  }

  .packages .p-con .logistics .logistics-box .item .time {
    color: #999;
  }

  .packages .p-con .logistics .logistics-box .item .text {
    margin-top: 5px;
    width: 400px;
  }

  .order-info {
    background: #f7f8fa;
    margin-top: 20px;
    display: flex;
    padding: 20px;
  }

  .order-info .info-item {
    width: 25%;
    padding-right: 30px;
  }

  .order-info .info-item .item-tit {
    font-weight: 600;
  }

  .order-info .info-item .item {
    margin-top: 10px;
    display: flex;
    line-height: 20px;
  }

  .order-info .info-item .item .text {
    white-space: nowrap;
  }

  .goods-list {
    margin-top: 20px;
  }

  .goods-list .df {
    display: flex;
    align-items: center;
  }

  .goods-list .df .name {
    line-height: 20px;
    margin:0 auto;
  }

  .goods-list .goods-total {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }

  .goods-list .goods-total .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #999;
    margin-top: 5px;
  }

  .goods-list .goods-total .item .text {
    width: 80px;
    text-align: center;
  }

  .goods-list .goods-total .item .number {
    text-align: right;
  }

  .goods-list .goods-total .item.act-price {
    margin-top: 20px;
    color: #333;
    font-weight: 600;
  }

  .goods-list .goods-total .item.act-price .number {
    color: #c00;
  }

  .order-log {
    margin-top: 20px;
    border-top: 1px dashed #e9eaec;
    padding: 20px 10px;
  }

  .order-log .log-title {
    height: 30px;
    width: 100%;
    line-height: 30px;
    font-weight: bold;
  }

  .order-log .log-cont {
    color: #155BD4;
    margin-top: 20px;
  }

  .res-ifon {
    word-break: break-word
  }
}
}

</style>
